<template>
  <view class="container">
    <unicloud-db
      ref="udb"
      v-slot:default="{data, pagination, loading, hasMore, error}"
      :where="`user_id==$cloudEnv_uid`"
      :collection="collectionList"
      field="user_id,title,description,content,article_status,view_count,like_count,comment_count,last_comment_user_id,picurls,publish_date,last_modify_date"
    >
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
        <uni-list>
          <uni-list-item
            v-for="(item, index) in data"
            :key="index"
            showArrow
            :clickable="true"
            @click="handleItemClick(item._id)"
          >
            <template v-slot:body>
              <text>
                <!-- 此处默认显示为_id，请根据需要自行修改为其他字段 -->
                <!-- 如果使用了联表查询，请参考生成的 admin 项目中 list.vue 页面 -->
                {{item.title}}
              </text>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
    <uni-fab
      ref="fab"
      horizontal="right"
      vertical="bottom"
      :pop-menu="false"
      @fabClick="fabClick"
    />
  </view>
</template>

<script>
const db = uniCloud.database();
export default {
  data() {
    return {
      collectionList: "quanzi_article",
      loadMore: {
        contentdown: "",
        contentrefresh: "",
        contentnomore: ""
      }
    };
  },
  onPullDownRefresh() {
    this.$refs.udb.loadData(
      {
        clear: true
      },
      () => {
        uni.stopPullDownRefresh();
      }
    );
  },
  onReachBottom() {
    this.$refs.udb.loadMore();
  },
  methods: {
    handleItemClick(id) {
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id
      });
    },
    fabClick() {
      // 打开新增页面
      uni.navigateTo({
        url: "/pages/edit/edit",
        events: {
          // 监听新增数据成功后, 刷新当前页面数据
          refreshData: () => {
            this.$refs.udb.loadData({
              clear: true
            });
          }
        }
      });
    }
  }
};
</script>

<style>
</style>
